<style lang="less">
  .bg-row{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  .bg-row::before,.bg-row::after{
    display: table;
  }
  .bg-row::after{
    clear: both;
  }
  .bg-row::before {
    content: "";
  }
  .bg-col{
    box-sizing: border-box;
  }
  .bg-col-6 {
    width: 25%;
    height: 100%;
    padding-right: 20px;
  }
  .bg-col-18 {
    width: 75%;
    height: 100%;
  }
  [class*=bg-col-] {
    float: left;
    position: relative;
  }
</style>
<template>
  <div style="width: 100vw; height: 100vh;">
    <div class="bg-row">
      <div class="bg-col bg-col-6" :style="{width: width_l}">
        <el-tabs
              type="border-card"
              tab-position="left"
              class="bg-tabs"
            >
              <el-tab-pane label="用户管理">用户管理</el-tab-pane>
              <el-tab-pane label="配置管理">配置管理</el-tab-pane>
              <el-tab-pane label="角色管理">角色管理</el-tab-pane>
              <el-tab-pane label="定时任务">定时任务补偿</el-tab-pane>
            </el-tabs>
            <el-button
              class="bg-button"
              icon="el-icon-s-operation"
              @click="handleTabShow"
            ></el-button>
      </div>
      <div class="bg-col bg-col-18" :style="{width: width_r}">
        <div class="right" ref="right">
          <input
            type="file"
            @change="change"
            style="position: absolute; right: 0"
          />
          <div class="bg-nav">
            <div class="bg-nav-cont" style="margin-right: 10px">
              <el-button size="mini" class="bg-nav-cont-icon el-icon-zoom-in"
                >放大</el-button
              >
              <el-button size="mini" class="bg-nav-cont-icon el-icon-zoom-out"
                >缩小</el-button
              >
              <el-button
                size="mini"
                class="bg-nav-cont-icon el-icon-ice-cream-square"
                >居中</el-button
              >
              <el-button size="mini" class="bg-nav-cont-icon el-icon-rank"
                >移动</el-button
              >
            </div>
            <div class="bg-nav-cont">
              <el-button
                size="mini"
                class="bg-nav-cont-icon el-icon-refresh-left"
                >撤销</el-button
              >
              <el-button size="mini" class="bg-nav-cont-icon el-icon-refresh"
                >重做</el-button
              >
              <el-button size="mini" class="bg-nav-cont-icon el-icon-picture"
                >原图</el-button
              >
              <el-button size="mini" class="bg-nav-cont-icon el-icon-search"
                >预览</el-button
              >
              <el-button size="mini" class="bg-nav-cont-icon el-icon-scissors"
                >抠图</el-button
              >
            </div>
          </div>
          <bg-canvas v-if="true" :src="src"></bg-canvas>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import GbCanvas from "./canvas.vue";
export default {
  name: "cut-figures",
  data() {
    return {
      ctx: null,
      src: "",
      isShow: false,
      leftCol: 6,
      width_l: "25%",
      width_r: "75%",
      rightCol: 18,
      isvisible: false,
    };
  },
  mounted() {},
  methods: {
    change(event) {
      let file = event.target.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.src = reader.result;
        // this.isShow = true;
      };
    },
    handleTabShow() {
      this.isvisible = !this.isvisible;
    },
  },
  watch: {
    isvisible(newVal) {
      if (newVal) {
        this.width_l = "20px";
        this.width_r = "calc(100% - 20px)";
      } else {
        this.width_l = "25%";
        this.width_r = "75%";
      }
    },
  },
  components: {
    "bg-canvas": GbCanvas,
  },
};
</script>
<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  background: #6c757d;
  position: relative;
  overflow: hidden;
}
.bg-nav {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 10000;
  &-cont {
    display: inline-block;
    &-icon {
      color: #fff;
      background-color: #343a40;
      display: inline-block;
      font-weight: 400;
      user-select: none;
    }
  }
}
.el-button + .el-button {
  margin-left: 0;
}
.bg-button {
  background: color;
  padding: 0;
  position: absolute;
  right: 0;
  top: 50%;
  border: 0;
  height: 50px;
  width: 20px;
}
.bg-tabs{
  height: calc(100% - 2px);
  border: 0;
}
</style>